<template>
  <a-row class="box" :gutter="16">
    <a-col class="right-line" :span="6">
      <role-list @select="handleRoleSelected"></role-list>
    </a-col>
    <a-col :span="18">
      <!-- 保存按钮-固钉 -->
      <div>
        <a-button class="save-btn" type="primary" @click="saveAssigment">保存</a-button>
        <a-row>
          <a-col :span="20" :offset="2">
            <a-card :bordered="false">
              <a-form>
                <a-form-item>
                  <!-- 选择数据权限 -->
                  <a-radio-group @change="handleDataScopeChange" :value="form.dataScope">
                    <a-radio :style="radioStyle"
                             v-for="d in dataScopeList || []"
                             :key="d.code"
                             :value="d.code">{{d.name}}
                    </a-radio>
                  </a-radio-group>
                </a-form-item>
                <a-form-item v-if="customDataScope">
                  <!-- 自定义数据权限 -->
                  <a-tree-select
                    :value="form.customAccessibleDeptIds"
                    @change="handleCustomAccessibleDeptIdsChange"
                    allowClear
                    multiple
                    :dropdownStyle="{ maxHeight: '400px', overflow: 'auto' }"
                    :treeData="deptTree"
                    placeholder="请选择所属部门"
                    treeDefaultExpandAll
                    :treeDataSimpleMode="true"
                  >
                  </a-tree-select>
                </a-form-item>
              </a-form>




            </a-card>
          </a-col>
        </a-row>
      </div>

    </a-col>
  </a-row>
</template>

<script>

  import {findPages} from "@/api/view"
  import {findDepts} from '@/api/dept'
  import {findRoles, assignDataScopePermissions, findRoleAssignedDataScopePermissions} from "@/api/role"
  import RoleList from "../RoleList"
  import {groupBy} from 'lodash'
  import {mixin, mixinDevice} from '@/utils/mixin'
  import FooterToolBar from '@/components/FooterToolbar'
  import {mapGetters} from 'vuex'

  export default {

    mixins: [mixin, mixinDevice],

    name: 'RoleAssignViewPermission',

    data() {
      return {
        radioStyle: {
          display: 'block',
          height: '30px',
          lineHeight: '30px',
        },
        roleId: null,
        form: {
          dataScope: null,
          customAccessibleDeptIds: []
        },
        customDataScope: null,

        deptTree: [], // 部门选项
      }
    },
    computed: {
      ...mapGetters(['dataScopeList']),
    },

    components: {
      RoleList,
      FooterToolBar
    },

    created() {
      this.loadDeptTreeOptions()
    },

    methods: {

      loadDeptTreeOptions() {
        findDepts().then(resp => {
          this.deptTree = resp.result.list.map(dept => {
            return {
              id: dept.id + '',
              pId: dept.parent + '',
              rootPid: 0 + '',
              value: dept.id + '',
              label: dept.name,
            }
          })
        })
      },

      handleDataScopeChange(e) {
        const dataScope = e.target.value
        this.form.dataScope = dataScope
        //code = 5, 自定义部门的数据
        this.customDataScope = (dataScope===5)?true:false
      },

      handleCustomAccessibleDeptIdsChange(deptIds){
        this.form.customAccessibleDeptIds = deptIds
      },

      handleRoleSelected(roleId) {
        console.log('数据权限, roleId: %o',roleId)
        this.roleId = roleId
        if (!this.roleId) {
          return false
        }
        findRoleAssignedDataScopePermissions(this.roleId).then(resp=>{
          let roleDataScope = resp.result.obj
          roleDataScope.dataScope = roleDataScope.dataScope + ''
          // 5 --> 自定义数据权限
          this.customDataScope = (roleDataScope.dataScope==='5')
          this.form.dataScope = roleDataScope.dataScope
          this.form.customAccessibleDeptIds = roleDataScope.customAccessibleDeptIds
        })
      },

      saveAssigment() {
        if (!this.roleId) {
          this.$message.warn('必须选择一个角色以分配功能权限')
          return false
        }
        let data = Object.assign({},this.form)
        data.dataScope = parseInt(data.dataScope)
        assignDataScopePermissions(this.roleId,data).then(()=>{
          this.$message.success('保存数据权限成功')
        })
      }
    }

  }
</script>

<style lang="less" scoped>
  .box {
    height: 60vh;

    & .right-line {
      height: 100%;
      border-right: 1px solid #e8e8e8;
    }

    & .save-btn {
      position: fixed;
      right: 90px;
      z-index: 3;
    }

    & .module-title {
      font-size: 22px;
      color: #303133;
    }

    & .page {
      margin-bottom: 12px;

      & .menu {
        & .title {
          font-size: 18px;
        }

        & .button {
          float: right;
        }
      }

      & .dash-line {
        margin-top: 10px;
        margin-bottom: 10px;
      }

      & .buttons {
        margin-bottom: 24px;

        & .left {
          width: 100%;

          & .chk-box-col {
            margin-bottom: 10px;
          }
        }

        & .right {
          float: right;
        }
      }
    }


  }

</style>
